<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew title="合同详情" showBack />
    </template>
    <div class="cantainer">
      <div>
        <div :style="'width:' + paper.a4.width + 'px'" class="heard">
          <div class="status" :style="
              'color:' +
              contractStatus.find(
                ({ value }) => value === userData.contractStatus
              )?.color
            ">
            .{{
              contractStatus.find(
                ({ value }) => value === userData.contractStatus
              )?.text
            }}
          </div>
          <div class="text">
            <a-avatar>{{ userData.name }}</a-avatar>
            <div class="name">
              <div>{{ userData.name }}</div>
              <div v-if="userData.contractStatus === 5">
                退回原因{{ contractData.returnReason }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bodyBox">
        <div :style="
            'width:' +
            (paper.a4.width - 40) +
            'px;padding:20px;min-height:' +
            (paper.a4.height - 40) +
            'px'
          " class="body" v-html="htmlStrList[showIndex]" />
        <div class="body"></div>
      </div>
    </div>
    <footer>
      <a-space>
        <a-button class="btn" type="secondary" @click="router.back()">
          返回
        </a-button>
        <a-button class="btn" type="primary" @click="toEditContract()" v-if="contractData.status === 2 || contractData.status === 1">
          修改合同
        </a-button>
        <a-button class="btn" type="primary" status="danger" v-if="contractData.status === 2" @click="refusalReturn">
          拒绝退回
        </a-button>
      </a-space>
    </footer>
  </ContentCard>
</template>

<script lang="tsx" setup>
import {
  GetUserContractByStatusDetail,
  SwitchDraftWaitSignedContract,
  DraftWaitSignedContractSavePutStatus,
  EditContractStatus
} from '@/apis/management/contract/contractManagement/waitSigned';
import { paper } from '@/utils/printAndPdf';
import {
  contractStatus,
  contractStatusToUserStatus
} from '@/utils/dictionary/contract';
import { Message } from '@arco-design/web-vue';
let router = useRouter();

let refusalReturn = async () => {
  await Promise.all([
    DraftWaitSignedContractSavePutStatus({
      ids: [contractData.userId],
      status: 4
    }),
    EditContractStatus({ id: contractData.id, status: 1 })
  ]);
  Message.success('拒绝成功');
  router.back();
};

let userData = reactive<any>({});
let contractData = reactive<any>({});
let htmlStrList = ref<any[]>([]);
let showIndex = ref(0);
let loadData = async () => {
  try {
    let data = JSON.parse(localStorage.getItem('contractDetailsData') + '');
    Object.assign(userData, data);

    let status =
      contractStatusToUserStatus.find(
        ({ value }) => value === data.contractStatus
      )?.status || 0;
    let res = await GetUserContractByStatusDetail({
      userId: data.id as number,
      status: status
    });
    if (!res[0]) return;
    Object.assign(contractData, res[0]);
    htmlStrList.value =
      (await Promise.all(
        res[0].children?.map((item: any) => {
          return SwitchDraftWaitSignedContract({
            id: res[0].userId,
            text: item.text,
            codes: item.codes
          });
        })
      )) || [];
  } catch (err) {
    console.log(err);
  }
};
loadData();

let toEditContract = async () => {
  localStorage.setItem('contractDetailsData', JSON.stringify({ ...userData }));
  router.push({ name: 'EditContract' });
};
</script>
<style lang="less">
.cantainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

  .heard {
    height: 100px;
    // transform: scale(1.4);
    border: 0.5px solid var(--color-neutral-5);
    .status {
      border-bottom: 0.5px solid var(--color-neutral-5);
      line-height: 26px;
      padding-left: 20px;
      background: rgb(var(--arcoblue-1));
    }
    .text {
      display: flex;
      justify-content: flex-start;
      padding-left: 20px;
      height: 70px;
      align-items: center;
      .name {
        margin-left: 20px;
        line-height: 22px;
      }
    }
  }
  .body {
    word-wrap: break-word;
    margin: 20px;
    margin-bottom: 70px;
    box-shadow: 0px 0px 5px var(--color-neutral-6);
    // transform: scale(1.4);
  }
}

footer {
  height: 100px;
  padding-top: 15px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
</style>
